<template>
	<div>
		<div class="search-bar">
			<Button type="primary" icon="ios-search" @click="">搜索</Button>
			<Button type="primary" icon="plus-round" @click="ShowAddDistriDetail">添加</Button>			
		</div>
		<Table border :context="self" :columns="DistriColumn" :data="dData"></Table>
		<Modal v-model="DistriDetailModal" :closable="false" :title="DistriDetailTitle" cancel-text='' width='auto' :styles="ModelStyle">
			<row>
				<Form ref="DestriDetailForm" :model="DestriDetailForm" :label-width="80" inline>
					<Form-item label="配送单号" prop="ID" style="width:45%;">
						{{DestriDetailForm.ID}}
					</Form-item>
					<Form-item label="配送日期" prop="DistributedDate">
						<Date-picker v-model="DestriDetailForm.DistributedDate" type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker>
					</Form-item>
					<Form-item label="会员" prop="FamilyNameID" style="width:45%;">
						<Select v-model="DestriDetailForm.FamilyID" filterable style="width: 200px">
							<Option v-for="item in MemberList" :value="item.Value" :key="item">{{ item.Text }}</Option>
						</Select>
					</Form-item>
					<Form-item label="手机号" prop="Mobile">
						{{DestriDetailForm.Mobile}}
					</Form-item>
					<Form-item label="家庭人数" prop="FamilyNumber">
						{{DestriDetailForm.FamilyNumber}}
					</Form-item>
					<Form-item label="家庭概况" prop="Description" style="width:90%">
						{{DestriDetailForm.Description}}
					</Form-item>
					<Form-item label="配送信息" prop="AddressID" style="width:90%;">
						<Select v-model="DestriDetailForm.AddressID" filterable style="width: 200px" @on-change="ChangeAddress">
							<Option v-for="item in AddressList" :value="item.Value" :key="item">{{ item.Text }}</Option>
						</Select>
					</Form-item>
					<Form-item label="联系人" prop="Contractor" style="width:45%;">
						{{DestriDetailForm.Contractor}}
					</Form-item>
					<Form-item label="联系电话" prop="Phone" style="width:45%;">
						{{DestriDetailForm.Phone}}
					</Form-item>
					<Form-item label="送货地址" prop="Address" style="width:90%;">
						{{DestriDetailForm.Address}}
					</Form-item>
					<Form-item label="所在区域" prop="Region" style="width:90%;">
						{{DestriDetailForm.Region}}
					</Form-item>
					<Form-item label="配送清单" style="width:90%;">
						<Table :context="self" v-show="DestriListShow" border :columns="DistriListColumn" :data="DestriDetailForm.DistriList"></Table>
						<Button type="dashed" long icon="plus-round">添加新清单</Button>
					</Form-item>
				</Form>
			</row>
		</Modal>
		<Modal v-model="modalList" :closable="true" :title="ListTitle" cancel-text='' width='360'>
			<Form ref="ListForm" :model="ListForm" :label-width="80">
				<Form-item label="家庭卡" prop="FamilyCardID">
					<Select v-model="ListForm.FamilyCardID" :filterable="SwitchFilter" style="width: 200px">
						<Option v-for="item in FamilyCardData" :value="item.Value" :key="item">{{ item.Text }}</Option>
					</Select>
				</Form-item>
				<Form-item label="产品" prop="ProductID">
					<Select v-model="ListForm.ProductID" :filterable="SwitchFilter" style="width: 200px">
						<Option v-for="item in ProductData" :value="item.Value" :key="item">{{ item.Text }}</Option>
					</Select>
				</Form-item>
				<Form-item label="数量" prop="Amount">
					<Input v-model="ListForm.Amount" type="number" placeholder="请输入" style="width: 200px"></Input>
				</Form-item>
				<Form-item label="溯源报告" prop="ReportID">
					<Select v-model="ListForm.ReportID" :filterable="SwitchFilter" style="width: 200px">
						<Option v-for="item in ReportData" :value="item.Value" :key="item">{{ item.Text }}</Option>
					</Select>
				</Form-item>
			</Form>
		</Modal>
	</div>
</template>
<script>
	import testData from '@/json/TestData.json' //测试用
	export default {
		data() {
				return {

					DestriListShow: true,
					self: this,
					FamilyCardData: testData.FamilyCardData.Data,
					ProductData: testData.ProductData.Data,
					ReportData: testData.ReportData.Data,
					SwitchFilter: true,
					DestriDetailForm: {
						ID: 2,
						Mobile: '',
						DistributedDate: '',
						FamilyID: 0,
						Description: '',
						FamilyNumber: 0,
						Contractor: '',
						Phone: '',
						Address: '',
						Region: '',
						AddressID: 0,
						DistriList: []
					},
					ListForm: {
						FamilyCardID: 0,
						ProductID: 0,
						Amount: 0,
						ReportID: 0
					},
					modalList: false,
					ListTitle: ' ',
					AddressList: testData.AddressData.Data,
					DistriDetailModal: false,
					ModelStyle: {
						padding: '20px',
						maxWidth: '800px'
					},

					DistriColumn: [{
						title: '配送编号',
						align: 'center',
						key: 'ID'
					}, {
						title: '联系人',
						align: 'center',
						key: 'Contractor'
					}, {
						title: '联系电话',
						align: 'center',
						key: 'Phone'
					}, {
						title: '配送地址',
						align: 'center',
						key: 'Address'
					}, {
						title: '配送日期',
						align: 'center',
						key: 'DistributedDate'
					}, {
						title: '创建日期',
						align: 'center',
						key: 'CreateTime'
					}, {
						title: '操作',
						key: 'Operate',
						width: 100,
						align: 'center',
						render(row, column, index) {
							return `<i-button type="primary" size="small" @click="ShowDistriDetial(${index})">查看编辑</i-button> `;
						}
					}], //
					DistriDetailTitle: ' ',
					DistriListColumn: [{
						title: '家庭卡',
						align: 'center',
						key: 'FamilyCard'
					}, {
						title: '产品',
						align: 'center',
						key: 'Product'
					}, {
						title: '数量',
						align: 'center',
						key: 'Amount'
					}, {
						title: '溯源报告',
						align: 'center',
						key: 'Report'
					}, {
						title: '操作',
						key: 'Operater',
						width: 100,
						align: 'center',
						render(row, column, index) {
							return `<i-button type="primary" size="small" @click="ShowUpdateList(${index})"> 编辑 </i-button> `;
						}
					}],
					dData: testData.DistributionData.Data,
					MemberList: testData.MemberData.Data,
				}
			},
			watch: {
				'DistriDetailModal': 'watchDestriFormData'
			},
			methods: {
				watchDestriFormData() {
					console.log(1);
					if(this.DestriDetailForm.DistriList.length > 0)
						this.DestriListShow = true;
					else this.DestriListShow = false;
				}, //监听地址表格数据事件				
				ShowUpdateList(index) {
					this.modalList = true;
					this.ListTitle = '编辑配送清单';
					var row = this.DestriDetailForm.DistriList[index];
					this.$set(this.ListForm, 'FamilyCardID', row.FamilyCardID);
					this.$set(this.ListForm, 'ProductID', row.ProductID);
					this.$set(this.ListForm, 'Amount', row.Amount);
					this.$set(this.ListForm, 'ReportID', row.ReportID);

				},
				ChangeAddress(value) {
					this.$set(this.DestriDetailForm, 'Phone', '1887501940' + value);
					this.$set(this.DestriDetailForm, 'Region', 'Region' + value);
					this.$set(this.DestriDetailForm, 'Contractor', 'Contactor' + value);
					this.$set(this.DestriDetailForm, 'Address', 'Address' + value);
				},
				QueryChange(query) {

				},
				ShowDistriDetial(index) {
					var row = this.dData[index];
					this.DistriDetailModal = true;
					this.DistriDetailTitle = "编辑配送订单";
					this.$set(this.DestriDetailForm, 'ID', row.ID);
					this.$set(this.DestriDetailForm, 'Phone', row.Phone);
					this.$set(this.DestriDetailForm, 'FamilyID', row.FamilyID);
					this.$set(this.DestriDetailForm, 'Contractor', row.Contractor);
					this.$set(this.DestriDetailForm, 'DistributedDate', row.DistributedDate);
					this.$set(this.DestriDetailForm, 'Address', row.Address);
					this.$set(this.DestriDetailForm, 'Description', row.Description);
					this.$set(this.DestriDetailForm, 'FamilyNumber', row.FamilyNumber);
					this.$set(this.DestriDetailForm, 'Region', row.Region);
					this.$set(this.DestriDetailForm, 'AddressID', row.AddressID);
					this.$set(this.DestriDetailForm, 'Mobile', row.Mobile);
					this.$set(this.DestriDetailForm, 'DistriList', row.DistriList);
				},
				ShowAddDistriDetail() {
					this.$refs['DestriDetailForm'].resetFields();
					this.DistriDetailModal = true;
					this.DistriDetailTitle = "添加配送订单";
					this.$set(this.DestriDetailForm, 'ID', '随机生成的');
					this.$set(this.DestriDetailForm, 'Phone', '');
					this.$set(this.DestriDetailForm, 'FamilyID', 0);
					this.$set(this.DestriDetailForm, 'Contractor', '');
					this.$set(this.DestriDetailForm, 'DistributedDate', '');
					this.$set(this.DestriDetailForm, 'Address', '');
					this.$set(this.DestriDetailForm, 'Description', '');
					this.$set(this.DestriDetailForm, 'FamilyNumber', '');
					this.$set(this.DestriDetailForm, 'Region', '');
					this.$set(this.DestriDetailForm, 'AddressID', 0);
					this.$set(this.DestriDetailForm, 'Mobile', '');
					this.$set(this.DestriDetailForm, 'DistriList', []);
				},
				ChangeSwitchFilter() {}
			}
	}
</script>
<style>
	.col-border {
		border-right: thin solid #B2B2B2;
		height: 40px;
		line-height: 40px;
	}
</style>